<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家详情</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css"/>
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../styles/shop.css"/>
    <link rel="stylesheet" type="text/css" href="../styles/common.css"/>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/zepto.min.js"></script>


    <script>

    </script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        window.onload = function () {
            const {createApp, ref} = Vue

            createApp({
                setup() {
                    // const params = new URLSearchParams(window.location.search);
                    // let id = params.get('id');
                    let id = sessionStorage.getItem("id")

                    const productList1 = ref([])
                    const productList2 = ref([])
                    axios.get("http://localhost:3000/product", {params: {"shopId": id}}).then(response => {
                        if (response.status === 200) {
                            productList1.value = response.data.filter(item => item.type === 1)
                            productList2.value = response.data.filter(item => item.type === 2)
                        }
                    })

                    return {
                        productList1, productList2
                    }
                }
            }).mount('#app')
        }
    </script>

</head>

<body>
<div id="app" class="wrap">
    <!-- 头部 start -->
    <header class="header_bar">
        <a href="../index.html">
            <div class="header_bar_back"></div>
        </a>
        <div class="header_bar_title">商家主页</div>
    </header>
    <!-- 头部 end -->
    <!-- 商家主页-头部 start -->
    <div class="shop_info">
        <div class="logo">
            <img src="../images/shop/yh.jpg" alt="">
        </div>
        <div class="title">
            <h2>
                <span>永辉超市-搜秀城店</span>
                <i class="iconfont icon-yousanjiao"></i>
            </h2>
            <div class="discount">
                <div>
                    <span class="special">满减</span>
                    <span class="dis_active">满99减98，满199减198</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 商家主页-头部 end -->
    <div class="container">
        <!-- 商品列表 start -->
        <div class="goods">
            <div class="left">
                <ul>
                    <li class="cur">
                        <span><a href="#A">限量秒杀</a></span>
                    </li>
                    <li>
                        <span><a href="#B">品牌直降</a></span>
                    </li>
                    <li>
                        <span><a href="#C">情满中秋</a></span>
                    </li>
                </ul>
            </div>
            <div class="right" onscroll="toscroll()">
                <ul>
                    <li id="A">
                        <h1 class="goodTitle">限量秒杀</h1>
                        <dl>
                            <dd v-for="product in productList1" :key="product.id" class="good_item">
                                <img src="../images/goods/qx.jpg" alt="">
                                <section class="info">
                                    <p class="name">{{product.name}}</p>
                                    <p class="desc">{{product.dec}}</p>
                                    <p class="sale">
                                        <span>月售176</span>
                                        <span>好评率96%</span>
                                    </p>
                                    <div class="more">
                                        <div class="price">
                                            <span>￥</span> 6.9
                                        </div>
                                        <div class="action">
                                            <span class="iconfont icon-jian"
                                                  onclick="changenum('num1','reduce')"></span>
                                            <span class="num" id="num1">1</span>
                                            <span class="iconfont icon-jia" onclick="changenum('num1','add')"></span>
                                        </div>
                                    </div>
                                </section>
                            </dd>


                        </dl>
                    </li>
                    <li id="B">
                        <h1 class="goodTitle">品牌直降</h1>
                        <dl>
                            <dd v-for="product in productList2" :key="product.id" class="good_item">
                                <img src="../images/goods/jd.jpg" alt="">
                                <section class="info">
                                    <p class="name">{{product.name}}</p>
                                    <p class="desc">{{product.dec}}</p>
                                    <p class="sale">
                                        <span>月售176</span>
                                        <span>好评率96%</span>
                                    </p>
                                    <div class="more">
                                        <div class="price">
                                            <span>￥</span> 6.5
                                        </div>
                                        <div class="action">
                                            <span class="iconfont icon-jian"
                                                  onclick="changenum('num5','reduce')"></span>
                                            <span class="num" id="num5">1</span>
                                            <span class="iconfont icon-jia" onclick="changenum('num5','add')"></span>
                                        </div>
                                    </div>
                                </section>
                            </dd>


                        </dl>
                    </li>
                    <li id="C">
                        <h1 class="goodTitle">情满中秋</h1>
                        <dl>
                            <dd class="good_item">
                                <img src="../images/goods/dzx.jpg" alt="">
                                <section class="info">
                                    <p class="name">阳澄湖大闸蟹(538型)</p>
                                    <p class="desc">3.0公蟹 2.0母蟹</p>
                                    <p class="sale">
                                        <span>月售1176</span>
                                        <span>好评率88%</span>
                                    </p>
                                    <div class="more">
                                        <div class="price">
                                            <span>￥</span> 666
                                        </div>
                                        <div class="action">
                                            <span class="iconfont icon-jian"
                                                  onclick="changenum('num9','reduce')"></span>
                                            <span class="num" id="num9">1</span>
                                            <span class="iconfont icon-jia" onclick="changenum('num9','add')"></span>
                                        </div>
                                    </div>
                                </section>
                            </dd>

                        </dl>
                    </li>


                </ul>
            </div>
        </div>
        <!-- 商品列表 end -->
    </div>
</div>
<!--去结算 start-->
<div class="cart">
    <div class="cart_info">
        <div class="carlogo">
            <span class="iconfont icon-gouwuche">   <i class="count">1</i></span>

        </div>
        <div class="price">
            <div class="noShop">
                <p style="color: #fff;font-size: 0.3rem;">总计：101 元</p>
            </div>
        </div>
        <div class="account" onclick="location.href='/pages/order-confirm.html'">去结算</div>
    </div>
    <!--去结算 end-->
</body>

<script>
    //数量加减
    function changenum(numid, action) {
        let numitem = $('#' + numid);
        if (action == 'reduce') {
            numitem.text(parseInt(numitem.text()) == 0 ? 0 : (parseInt(numitem.text())) - 1);
        } else {
            numitem.text((parseInt(numitem.text())) + 1);
        }
    }

    //右侧滑动
    function toscroll() {
        var titles = $('.goodTitle');
        for (var i = 0; i < titles.length; i++) {
            var style = titles[i].getBoundingClientRect();
            if (style.top == 182) {
                $($(".left ul li")[i]).addClass('cur').siblings().removeClass('cur');
            }
        }
    }
</script>

</html>
